<script setup lang="ts">
import { onMounted, computed } from "vue";
import { Icons, Images } from "@/constants/images";
import { useRouter } from "vue-router";
import { useExamStore } from "@/store/modules/exam";
const router = useRouter();

const examStore = useExamStore();
const selectQuestion = (itemId: string) => {
    examStore.setCurrentQuestionId(itemId);
    router.replace("/exam-analysis?result=all");
};

onMounted(() => {
    examStore.initResult();

    console.log(examStore.getAllData);
});
const isMobile = computed(() => {
    const viewportWidth = document.documentElement.clientWidth;
    return viewportWidth <= 768;
});
const getScore = (index: number) => {
    let rightNumber = 0;
    console.log(examStore.getAllData);
    examStore.getAllData.list[index].list.forEach((element: any) => {
        if (element.questionType === 1 && element.correct === element.userAnswer) {
            rightNumber++;
        }

        if (element.questionType !== 1) {
            element.questionList.forEach((question: any) => {
                if (question.correct === question.userAnswer) {
                    rightNumber++;
                }
            })
        }
    });

    if (index === 1) {
        console.log(rightNumber);

        rightNumber = rightNumber / 2;
    }

    let score = 0;
    if (index === 1 || index === 2) {
        if (rightNumber < 1) {
            score = 0;
        }
        if (rightNumber >= 1 && rightNumber < 2) {
            score = 2;
        }
        if (rightNumber >= 2 && rightNumber < 3) {
            score = 3;
        }
        if (rightNumber >= 3 && rightNumber < 4) {
            score = 4;
        }
        if (rightNumber >= 4 && rightNumber < 5) {
            score = 5;
        }
        if (rightNumber >= 5 && rightNumber < 6) {
            score = 6;
        }
        if (rightNumber >= 6 && rightNumber < 7) {
            score = 6.5;
        }
        if (rightNumber >= 7 && rightNumber < 8) {
            score = 7;
        }
        if (rightNumber >= 8 && rightNumber < 9) {
            score = 7.5;
        }
        if (rightNumber >= 9 && rightNumber <= 10) {
            score = 8;
        }
    } else {
        if (rightNumber < 1) {
            score = 0;
        }
        if (rightNumber >= 1 && rightNumber <= 2) {
            score = 1;
        }
        if (rightNumber >= 3 && rightNumber <= 4) {
            score = 3;
        }
        if (rightNumber >= 5 && rightNumber <= 6) {
            score = 4;
        }
        if (rightNumber >= 7 && rightNumber <= 8) {
            score = 6;
        }
        if (rightNumber >= 9 && rightNumber <= 10) {
            score = 7;
        }
    }

    return score;
}


const aveageNum = (numbers: any) => {
    // 计算总和  
    const sum = numbers.reduce((acc: any, curr: any) => acc + curr, 0);
    // 计算平均值  
    const average = sum / numbers.length;

    // 将平均值转换为字符串，以便我们可以检查小数部分  
    const averageStr = average.toFixed(2); // 使用toFixed(2)来确保能检查到.5  
    const [integerPart, decimalPart] = averageStr.split('.');

    // 检查小数部分是否以5结尾  
    if (decimalPart.endsWith('5')) {
        // 如果是，则只取整数部分，并返回（这里已经是字符串，但我们可以直接返回整数）  
        return parseInt(integerPart, 10); // 使用parseInt确保得到整数  
    } else {
        // 否则，返回保留一位小数的平均值  
        return parseFloat(average.toFixed(1));
    }
}
</script>

<template>
    <div class="exam-result" :style="{
        backgroundImage: isMobile ? `url(${Images.RES_BG})` : 'none',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% auto',
    }">
        <div class="header">答题概况</div>
        <div class="aveage">
            <span>总得分</span>
            <div>{{ aveageNum([getScore(0), getScore(1), getScore(2), getScore(3)]).toFixed(1) }}</div>
            <span>分</span>
        </div>
        <div class="card">
            <div class="head">
                <h5 class="title is-5">详细得分</h5>


                <!-- <div class="is-flex is-align-items-center">
                    <span class="icon mr-1">
                        <img :src="Icons.ICON_QUESTIONBANK_TIMING" />
                    </span>
                    <span>练习时间：</span>
                    <span>{{ examStore.getCreateTime }}</span>
                </div> -->
                <div class="score-box">
                    <div class="single-score">
                        <div class="subtitle-box">
                            <span class="icon mr-1">
                                <img :src="Icons.ICON_MINETARGET" />
                            </span>
                            <span class="subtitle">听力得分</span>
                        </div>
                        <div class="score">
                            <div>{{ getScore(1).toFixed(1) }}</div>
                            <span>分</span>
                        </div>
                    </div>
                    <div class="single-score">
                        <div class="subtitle-box">
                            <span class="icon mr-1">
                                <img :src="Icons.ICON_MINECOLLECT" />
                            </span>
                            <span class="subtitle">阅读得分</span>
                        </div>
                        <div class="score">
                            <div>{{ getScore(2).toFixed(1) }}</div>
                            <span>分</span>
                        </div>
                    </div>
                    <div class="single-score">
                        <div class="subtitle-box">
                            <span class="icon mr-1">
                                <img :src="Icons.ICON_MINEEXAM" />
                            </span>
                            <span class="subtitle">口语得分</span>
                        </div>
                        <div class="score">
                            <div>{{ getScore(0).toFixed(1) }}</div>
                            <span>分</span>
                        </div>
                    </div>
                    <div class="single-score">
                        <div class="subtitle-box">
                            <span class="icon mr-1">
                                <img :src="Icons.ICON_MINEPRACTISE" />
                            </span>
                            <span class="subtitle">写作得分</span>
                        </div>
                        <div class="score">
                            <div>{{ getScore(3).toFixed(1) }}</div>
                            <span>分</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 答题卡 -->
            <div class="answer-sheet">
                <div class="is-flex is-justify-content-end status-box" style="gap: 10px;">
                    <div class="status-item">
                        <span class="square bg-red"></span>
                        <span>错误</span>
                    </div>
                    <div class="status-item">
                        <span class="square bg-green"></span>
                        <span>正确</span>
                    </div>
                    <div class="status-item">
                        <span class="square bg-grey"></span>
                        <span>未作答</span>
                    </div>
                </div>

                <div class="columns is-gapless is-multiline is-mobile">
                    <div class="part-box" v-for="(part) in examStore.getAllData.list">
                        <div class="sheet-title">{{ part.title }}</div>
                        <div class="sheet-list">
                            <div class="columns is-gapless is-multiline is-mobile">
                                <template v-for="(item) in part.list">
                                    <div v-if="item.questionType === 1" class="column is-one-fifth item"
                                        @click="selectQuestion(item.id)" :class="{
        right: item.userAnswer && item.userAnswer.toLowerCase() === item.correct.toLowerCase(),
        wrong: item.userAnswer && item.userAnswer.toLowerCase() !== item.correct.toLowerCase(),
    }">
                                        <span>{{ item.id }}</span>
                                    </div>


                                    <template v-if="item.questionType !== 1">
                                        <div v-for="question in item.questionList" @click="selectQuestion(question.id)"
                                            class="column is-one-fifth item" :class="{
        right: question.userAnswer && question.userAnswer.toLowerCase() === question.correct.toLowerCase(),
        wrong: question.userAnswer && question.userAnswer.toLowerCase() !== question.correct.toLowerCase(),
    }">
                                            <span>{{ question.id }}</span>
                                        </div>
                                    </template>

                                </template>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
html {
    background-color: #f6f6f6;
}

.navbar {
    background-color: #f6f6f6;
}

.head {
    font-weight: bold;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    position: relative;
    left: 50%;
    margin-left: -50%;
    font-weight: bold;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 12px;

    .title {
        display: flex;
        align-items: center;
        height: 44px;
        line-height: 1;

        &::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 14px;
            border-radius: 3px;
            background-color: #00CCCF;
            margin-right: 12px;
            margin-top: 2px;
        }
    }
}

.exam-result {
    .header {
        display: none;
    }

    .aveage {
        display: flex;
        align-items: end;
        margin-left: 40%;
        margin-top: 40px;
        gap: 10px;


        span {
            font-weight: 400;
            font-size: 16px;
            //color: #FFFFFF;
            line-height: 22px;
        }

        div {
            font-family: D-DIN, D-DIN;
            font-weight: bold;
            font-size: 50px;
            //color: #FFFFFF;
            line-height: 54px;
        }
    }

    .card {
        box-shadow: none;
        padding: 30px;
        border-radius: 30px;
    }

    .progress-box {
        margin: 50px auto;
        display: flex;
        justify-content: center;
    }

    .score-box {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        row-gap: 12px;

        .single-score {
            width: calc((100% - 12px) / 2);
            background: #F9F9F9;
            border-radius: 12px;
            padding: 16px;

            .icon {
                width: 16px;
                height: 16px;
            }

            .subtitle-box {
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .subtitle {
                font-weight: 500;
                font-size: 12px;
                color: #9395A4;
                line-height: 16px;
            }


            .score {
                margin-top: 12px;
                display: flex;
                align-items: end;
                gap: 10px;

                div {
                    font-family: D-DIN, D-DIN;
                    font-weight: bold;
                    font-size: 22px;
                    color: #141623;
                    line-height: 24px;
                }

                span {
                    font-weight: 500;
                    font-size: 12px;
                    color: #9395A4;
                    line-height: 16px;
                }
            }
        }

    }

    // 答题卡
    .answer-sheet {
        width: 1060px;
        padding: 30px;
        margin: 0 auto;
        overflow: hidden;

        .status-item {
            display: flex;
            align-items: center;
            color: #999;
            font-weight: bold;

            .square {
                width: 14px;
                height: 14px;
                border-radius: 4px;
                margin-right: 8px;
            }
        }

        .columns {
            width: 100%;
            margin-right: -25px;

            gap: calc((100% - 550px) / 9) !important;
            row-gap: 10px !important;

            &::-webkit-scrollbar {
                width: 6px;
                /* 滚动条宽度， width：对应竖滚动条的宽度 height：对应横滚动条的高度*/
                height: 4px;
                background: #ffffff;
            }

            &::-webkit-scrollbar-track {
                border-radius: 3px;
                background: transparent;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 3px;
                height: 100px;
                /* 滚动条滑块长度 */
                background: #e8e8e8;
            }

            .part-box {
                width: 100%;
            }
        }

        .column {
            &.item {
                width: 55px !important;
                height: 55px;
                border-radius: 12px;
                background-color: #f7f7f7;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #14161e;
                font-size: 16px;
                font-weight: bold;
                cursor: pointer;

                &.right {
                    background-color: #00ac26;
                    color: #fff;
                }

                &.wrong {
                    background-color: #ff6464;
                    color: #fff;
                }
            }
        }
    }

    .buttons {
        margin-top: 50px;

        button {
            width: 250px;
            height: 80px;
            border-radius: 25px;
            font-size: 16px;
            font-weight: bold;
        }
    }
}
</style>

<style scoped lang="scss">
@media (max-width: 768px) {
    .head {
        width: 100%;
        margin-left: 0;
        left: 0;
        margin-top: 44px;
    }

    .aveage {
        margin: 85px auto 0 auto;
        color: #FFFFFF;
    }

    .exam-result {
        padding: 10px 16px;
        border-radius: 0;
        border: none;

        .header {
            display: block;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 44px;
            text-align: center;
            height: 44px;
        }

        .card {
            padding: 0;
        }

        .answer-sheet {
            padding: 0;
            width: unset;
            position: relative;

            .status-box {
                position: absolute;
                right: 0;

            }
        }

        .columns {
            width: 100%;
            gap: calc((100% - 190px) / 4) !important;
            row-gap: 20px !important;

            .part-box {
                width: 100%;
            }

            .item {
                width: 38px !important;
                height: 38px;
                border-radius: 14px;
            }
        }
    }
}
</style>
